<template>
  <div class="view-fill">
    <div
      v-if="!stockHighLowWarningConfigModifyInfo.visible"
      class="app-container-flex"
    >
      <NewFullScreen
        v-model="showDialog"
        @returnBack="returnBack"
        title="库存预警配置详情"
      >
        <template v-slot:full-button>
          <el-button
            @click="update()"
            v-if="$permission('stockWarningConfig:update')"
            >修改</el-button
          >
        </template>
        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('basic_information') }}</p>
          </div>
          <div class="model-panel-body">
            <!-- form -->
            <BasicInformation
              :info="basicInfo.info"
              :label-width="basicInfo.labelWidth"
            />
          </div>
        </div>

        <div class="model-panel">
          <div class="model-panel-title">
            <Tooltip :text="$t('detailInfo')"></Tooltip>
          </div>
          <div class="model-panel-body">
            <div class="flex_full_item">
              <!-- 表格 -->
              <PageTable
                :refresh="tableInfo.refresh"
                :init-curpage="tableInfo.initCurpage"
                v-model:data="tableInfo.data"
                :api="tableInfo.api"
                :pager="false"
                :tabIndex="true"
                :checkBox="false"
                v-model:query="filterInfo.query"
                :field-list="tableInfo.fieldList"
                :handle="tableInfo.handle"
                :isDynamic="true"
              >
                <template v-slot:col-licenseNumber="scope">
                  <p>{{ scope.row.licenseNumber || '-' }}</p>
                  <p>{{ scope.row.brandName || '-' }}</p>
                </template>
                <template v-slot:col-commonName="scope">
                  <p>{{ scope.row.commonName || '-' }}</p>
                  <p>{{ scope.row.productCode || '-' }}</p>
                  <p>{{ scope.row.alias || '-' }}</p>
                </template>
                <template v-slot:col-defaultSupplierName="scope">
                  <p>{{ scope.row.defaultSupplierName || '-' }}</p>
                </template>
                <template v-slot:col-type="scope">
                  <p>{{ scope.row.productTypeValue || '-' }}</p>
                  <p>{{ scope.row.codeTypeValue || '-' }}</p>
                  <p>{{ scope.row.productCategoryValue || '-' }}</p>
                </template>
                <template v-slot:col-standard="scope">
                  <p>{{ scope.row.standard || '-' }}</p>
                  <p>{{ scope.row.unitName || '-' }}</p>
                </template>
              </PageTable>
            </div>
          </div>
        </div>
      </NewFullScreen>
    </div>
    <stock-high-low-warning-config-modify
      v-if="stockHighLowWarningConfigModifyInfo.visible"
      v-model:visible="stockHighLowWarningConfigModifyInfo.visible"
      :title="stockHighLowWarningConfigModifyInfo.title"
      :tableRow="stockHighLowWarningConfigModifyInfo.tableRow"
      @returnModify="returnModify"
    />
  </div>
</template>

<script setup name="stockHighLowWarningConfigDetail">
import { warningStockConfigDetailAll, warningStockConfigPageDetails } from '@/api/warning'
import { getCustomizeSetting } from '@/api/customize'
import StockHighLowWarningConfigModify from './modify'
const { proxy } = getCurrentInstance()
const emits = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  tableRow: {
    type: Object,
    default: () => {
      return {}
    },
  },
})
const basicInfo = ref({
  info: {
    data: {},
    fieldList: [
      { label: '仓库', value: 'depotName' },
      { label: '备注', value: 'remark', type: 'popover' },
    ],
  },
  labelWidth: '130px',
})
// 过滤相关配置
const filterInfo = ref({
  query: {
    warningStockConfigId: '',
  },
})
// 表格相关
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  api: warningStockConfigDetailAll,
  data: [],
  selections: [],

  fieldList: [
    {
      label: '通用名称\n编码\n别名',
      value: 'commonName',
      type: 'slot',
      minWidth: '220px',
    },
    {
      label: '产品类型\n条码类型\n产品分类',
      value: 'type',
      type: 'slot',
      minWidth: '150px',
    },
    {
      label: '供应商名称',
      value: 'defaultSupplierName',
      type: 'slot',
      minWidth: '150px',
    },
    { label: '规格\n计量单位', value: 'standard', type: 'slot' },
    // {label: '是否启用低水位', value: 'lowLevelEnable', type: 'slot'},
    { label: '包装规格', value: 'packingSpecification', type: 'column' },
    { label: '低水位', value: 'lowLevel', type: 'column' },
    // {label: '是否启用高水位', value: 'highLevelEnable', type: 'slot'},
    { label: '高水位', value: 'highLevel', type: 'column' },
    {
      label: '证号\n生产厂家',
      value: 'licenseNumber',
      type: 'slot',
      minWidth: '220px',
    },
  ],
})
const stockHighLowWarningConfigModifyInfo = ref({
  visible: false,
  title: '',
})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    emits('update:visible', val) // 更新父组件visible
  },
})

onMounted(() => {
  proxy.$nextTick(() => {
    if (Object.keys(props.tableRow).length) {
      basicInfo.value.info.data = { ...props.tableRow }
      filterInfo.value.query.warningStockConfigId = props.tableRow.id
      getList()
    }
  })
})
function returnBack() {
  emits('returnBack', false)
}
// 获取列表
function getList() {
  warningStockConfigDetailAll(filterInfo.value.query).then((resp) => {
    console.log(resp)
    if (resp && resp.success) {
      tableInfo.value.data = resp.data
    }
  })
}

function returnModify() {
  // getlist 获取的是 明细信息 
  getList()
  warningStockConfigPageDetails(props.tableRow.id).then(res => {
    if(res && res.success){
      basicInfo.value.info.data = res.data
    }
  })
}

//修改
function update() {
  stockHighLowWarningConfigModifyInfo.value.title = '修改库存预警配置'
  stockHighLowWarningConfigModifyInfo.value.tableRow = { ...props.tableRow }
  stockHighLowWarningConfigModifyInfo.value.visible = true
}
</script>

<style scoped></style>
